<script lang="ts" setup>
import { reactive, ref } from "vue"
import { FormInstance } from "element-plus"
import { Search, Refresh, Download } from "@element-plus/icons-vue"
// 接口
import {
  downloadShop,
  downloadShopAndPackage,
  downloadOfflineCostExcel,
  downloadBillRechargeExcel,
  downloadStoreSalesExcel
} from "@/api/SZ/personal"
import { getqueryTeamName } from "@/api/SZ/SZXxfy"

defineOptions({
  name: "personal"
})
const shopList = ref<any>([])
/**店铺数据 */
const getShopList = () => {
  getqueryTeamName().then((res: any) => {
    if (res.code == 200) {
      shopList.value = res.data
    }
  })
}
getShopList()

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  time: [new Date(), new Date()],
  startTime: new Date().getTime(),
  endTime: new Date().getTime(),
  shopId: [],
  shopName: [],
  isAbandoned: false
})
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  console.log("重置")
}
const handleSearch = () => {
  console.log("查询")
}
// #endregion

const timeChange = (dates: [Date, Date] | null) => {
  if (!dates) return
  searchData.startTime = new Date(dates[0]).getTime()
  searchData.endTime = new Date(dates[1]).getTime()
}
const selectChange = (selectIdList: any) => {
  searchData.shopName = selectIdList.map((id: any) => {
    const item = shopList.value.find((shop: any) => shop.id === id)
    return item ? item.name : ""
  })
}

// 下载方法
const downloadFunction = async (type: any) => {
  let name, responseData
  switch (type) {
    case 1:
      name = "投诉数据——整体——店铺.xlsx"
      responseData = await downloadShop({
        startTime: searchData.startTime,
        endTime: searchData.endTime,
        shop: searchData.shopName
      })
      break
    case 2:
      name = "投诉数据——整体——套餐——店铺.xlsx"
      responseData = await downloadShopAndPackage({
        startTime: searchData.startTime,
        endTime: searchData.endTime,
        PackageId: searchData.shopId
      })
      break
    case 3:
      name = "线下费用的记录.xlsx"
      responseData = await downloadOfflineCostExcel({
        startTime: searchData.startTime,
        endTime: searchData.endTime,
        shopName: searchData.shopName
      })
      break
    case 4:
      name = "话费充值的记录.xlsx"
      responseData = await downloadBillRechargeExcel({
        startTime: searchData.startTime,
        endTime: searchData.endTime,
        shopName: searchData.shopName
      })
      break
    case 5:
      name = "各店铺销量.xlsx"
      responseData = await downloadStoreSalesExcel({
        startTime: searchData.startTime,
        endTime: searchData.endTime,
        shopName: searchData.shopName,
        isAbandoned: searchData.isAbandoned
      })
      break
    default:
      name = "订单.xlsx"
      responseData = reactive<any>({
        code: 500,
        message: "类型不正确",
        data: undefined
      })
      break
  }

  const blob = new Blob([responseData.data], {
    type: "application/xlsx;charset=utf-8"
  })
  const downloadElement = document.createElement("a")
  const href = window.URL.createObjectURL(blob)
  downloadElement.href = href
  downloadElement.download = name
  document.body.appendChild(downloadElement)
  downloadElement.click()
  window.URL.revokeObjectURL(href)
  console.log("下载成功")
}
</script>

<template>
  <div class="app-container">
    <el-card class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="time" label="时间">
          <el-date-picker
            v-model="searchData.time"
            type="datetimerange"
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="timeChange"
          />
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="searchData.isAbandoned">剔除废单</el-checkbox>
        </el-form-item>

        <el-form-item prop="shopId" label="店铺">
          <el-select
            v-model="searchData.shopId"
            multiple
            clearable
            filterable
            placeholder="请选择"
            @change="selectChange"
          >
            <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 中间部分 -->
    <el-card>
      <!-- 中间渲染内容 -->
      <div class="table-center">
        <table style="width: 100%">
          <thead>
            <tr>
              <th>日期</th>
              <th>姓名</th>
              <th style="width: 150; align-content: center">操作</th>
              <th>功能</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2024年10月22日</td>
              <td>张珂</td>
              <td style="width: 150; align-content: center">
                <el-button :icon="Download" type="primary" text bg size="small" @click="downloadFunction(1)"
                  >下载</el-button
                >
              </td>
              <td style="width: 150; text-align: left">投诉数据——整体——套餐</td>
            </tr>
            <tr>
              <td>2024年10月22日</td>
              <td>张珂</td>
              <td style="width: 150; align-content: center">
                <el-button :icon="Download" type="primary" text bg size="small" @click="downloadFunction(2)"
                  >下载</el-button
                >
              </td>
              <td style="width: 150; text-align: left">投诉数据——整体——套餐——店铺</td>
            </tr>
            <tr>
              <td>2024年8月15日</td>
              <td>李新峰</td>
              <td style="width: 150; align-content: center">
                <el-button :icon="Download" type="primary" text bg size="small" @click="downloadFunction(3)"
                  >下载</el-button
                >
              </td>
              <td style="width: 150; text-align: left">下载线下费用的记录条数</td>
            </tr>
            <tr>
              <td>2024年8月15日</td>
              <td>李新峰</td>
              <td style="width: 150; align-content: center">
                <el-button :icon="Download" type="primary" text bg size="small" @click="downloadFunction(4)"
                  >下载</el-button
                >
              </td>
              <td style="width: 150; text-align: left">下载话费充值的记录条数</td>
            </tr>
            <tr>
              <td>2024年7月26日</td>
              <td>范铭雨</td>
              <td style="width: 150; align-content: center">
                <el-button :icon="Download" type="primary" text bg size="small" @click="downloadFunction(5)"
                  >下载</el-button
                >
              </td>
              <td style="width: 150; text-align: left">下载各店铺销量——状态：（100, 102, 200, -5） 是否废单：自定义</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
// .box-card {
//   height: 70px;
//   margin-bottom: 20px;
// }
.search-wrapper {
  margin-bottom: 20px;
}
.middle-top {
  margin-bottom: 20px;
}
.table-center {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
thead tr th {
  color: #909399;
  box-sizing: border-box;
  line-height: 23px;
  overflow: hidden;
  overflow-wrap: break-word;
  padding: 0 12px;
  text-overflow: ellipsis;
  white-space: normal;
}
tbody tr td {
  color: #606266;
  line-height: 23px;
  overflow: hidden;
  overflow-wrap: break-word;
  padding: 10px 12px;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: center;
}
th,
td {
  border-bottom: 1px solid #dfe6ec;
  padding: 8px 12px;
}
</style>
